import React,{useState} from 'react'
import address from '../address';
import { Form, Input, Button, Upload ,PageHeader} from 'antd';
import {   message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';


let token = '' || localStorage.getItem('token');


const normFile = (e) => {
  console.log('Upload event:', e);
  return e;
};


const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};


const AddArticle = (props) => {

    const [title, setTitle] = useState('')
    const [fileList, setFileList] = useState([])
    const [uploading, setUploading] = useState(false)



    const handleUpload = () => {
        const formData = new FormData();
        formData.append('title',title);
        formData.append('image', fileList[0]);
        formData.append('content', fileList[1]);
        formData.append('voice', fileList[2]);


        setUploading(true);
  
        fetch(address + '/admin/uploadpassage', {
            method : 'POST',
            mode : 'cors',
            headers: {
                'authorization':token
            },
            body : formData
        })
        .then(res => res.text())
        .then(d => {
            setUploading(false)
            props.history.push('/home/article')
        })
        .catch(err => {
            setUploading(false)
            console.log(err)
        })
      }

      const prop = {
        beforeUpload: file => {
            console.log(file);
            console.log(fileList);
          setFileList([...fileList, file])
          return false;
        },
       };
    
      return (
          <>
          <PageHeader
                className="site-page-header"
                onBack={() => props.history.push('/home/article')}
                subTitle="小贴士文章列表"

            />
            <Form
                {...layout}
                name="basic"
                initialValues={{ remember: true }}
                layout="vertical"
                style={{marginLeft:'4%',marginTop:'2%'}}
            >
            <Form.Item
                label="文章标题"
                name="username"
                rules={[{ required: true, message: '请输入文章标题' }]}
            >
                <Input value={title} onChange={e=>setTitle(e.target.value)}/>
            </Form.Item>
        

            <Form.Item
                name="upload1"
                label="封面图片"
                valuePropName="fileList1"
                getValueFromEvent={normFile}
                extra="请选择小贴士封面图片"
                rules={[{ required: true, message: '请选择小贴士封面图片' }]}
            >
                <Upload {...prop}>
                    <Button icon={<UploadOutlined />}>选择图片</Button>
                </Upload>
            </Form.Item>


            <Form.Item
                name="upload2"
                label="文章内容"
                valuePropName="fileList1"
                getValueFromEvent={normFile}
                extra="请选择小贴士文章内容（.txt文件格式）"
                rules={[{ required: true, message: '请选择小贴士文章内容' }]}
            >
                <Upload {...prop}>
                    <Button icon={<UploadOutlined />}>选择文章</Button>
                </Upload>
            </Form.Item>


            <Form.Item
                name="upload3"
                label="文章音频"
                valuePropName="fileList1"
                getValueFromEvent={normFile}
                extra="请选择小贴士封文章音频（.mp3文件格式）"
                rules={[{ required: true, message: '请选择小贴士封文章音频' }]}
            >
                <Upload {...prop}>
                    <Button icon={<UploadOutlined />}>选择音频</Button>
                </Upload>
            </Form.Item>
      
            <Form.Item {...tailLayout}>
                <Button
                    type="primary"
                    onClick={handleUpload}
                    loading={uploading}
                    style={{ marginTop: 16 }}
                >
                    {uploading ? '上传中...' : '上传'}
                </Button>
            </Form.Item>
            </Form>
        </>
      )
}

export default AddArticle;
